<template>
  <!-- #ifdef H5 -->
  <view
      class="floating-container"
      :style="floatingStyle"
      @touchstart="startDrag"
      @touchmove="onDrag"
      @touchend="stopDrag"
  >
<!--    <view class="icon" @tap="goBack">-->
<!--      ⬅️ &lt;!&ndash; 这里可以换成合适的图标 &ndash;&gt;-->
<!--    </view>-->
<!--    <view class="icon" @tap="goHome">-->
<!--      🏠 &lt;!&ndash; 这里可以换成合适的图标 &ndash;&gt;-->
<!--    </view>-->
    <view class="icon" v-if="pagesSize>1" @tap="goBack">
      <uv-icon size="18" name="arrow-left"></uv-icon>
    </view>
    <view class="icon" @tap="goHome">
      <uv-icon size="18" name="home"></uv-icon>
    </view>
  </view>
<!--  #endif-->
</template>



<script>
export default {
  props: {
    backPath: { type: String, default: null },
    homePath: { type: String, default: '/' },
    position: {
      type: Object,
      default: () => ({ right: '20px', bottom: '50px' })
    },
  },
  data() {
    return {
      isDragging: false,
      x: 0,
      y: 0,
      startX: 0,
      startY: 0,
      pagesSize: 2
    };
  },
  computed: {
    floatingStyle() {
      return {
        right: this.x + 'px',
        bottom: this.y + 'px'
      };
    }
  },
  created(){
    const pages = getCurrentPages();
    this.pagesSize = pages.length
    console.log("this.pagesSize",this.pagesSize)
  },
  methods: {
    goBack() {
      if (this.backPath) {
        uni.navigateTo({ url: this.backPath });
      } else {
        uni.navigateBack();
      }
    },
    goHome() {
      uni.$emit("tabBarIndexChange", 0);
      this.$store.commit('SET_TAB_BAR_IDX',0);
      uni.switchTab({ url: this.homePath });
    },
    startDrag(event) {
      this.isDragging = true;
      this.startX = event.touches[0].clientX;
      this.startY = event.touches[0].clientY;
      event.preventDefault(); // 阻止滚动
      event.stopPropagation(); // 防止事件冒泡
    },
    onDrag(event) {
      if (!this.isDragging) return;
      const dx = event.touches[0].clientX - this.startX;
      const dy = event.touches[0].clientY - this.startY;
      this.x -= dx;
      this.y -= dy;
      this.startX = event.touches[0].clientX;
      this.startY = event.touches[0].clientY;
      event.preventDefault(); // 阻止滚动
      event.stopPropagation(); // 防止事件冒泡
    },
    stopDrag() {
      this.isDragging = false;
    }
  },
  mounted() {
    this.x = parseInt(this.position.right);
    this.y = parseInt(this.position.bottom);
  }
};

</script>
<style scoped>
.floating-container {
  z-index: 100000;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  //background: white;
  border-radius: 20px;
  padding: 3px 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: grab;
  user-select: none;
  touch-action: none; /* 禁止触摸滑动 */
}

.icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 5px 0;
  background: #eee;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}

.icon:hover {
  background: #ddd;
}
</style>

